<template>
  <el-dialog v-model="dialogVisible" title="提示" width="30%">
    <span>此操作将永久删除该角色, 是否继续?</span>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmDelete">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { deleteRole } from "@/api/role";

const dialogVisible = ref(false);

const emit = defineEmits(["getDelete"]);

const arrIndex = ref(-1);
const arrRow = ref(1);

const deleteDialog = (index, row) => {
  dialogVisible.value = true;
  arrIndex.value = index;
  arrRow.value = row;

  console.log(arrIndex.value, arrRow.value.id);
};

// 确认删除
const confirmDelete = () => {
  dialogVisible.value = false;
  console.log(arrRow.value);

  let res = deleteRole(arrRow.value.id);
  console.log(res);

  emit("getDelete", arrIndex.value);
};

// 把子组件方法暴露出去
defineExpose({
  deleteDialog,
});
</script>

<style scoped lang="scss">
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
